import axios from "axios";
<template>
  <div class="configure">
    <div class="headerp">模板列表</div>
    <router-link to="NewTemplate">
      <el-button type="primary">新建模板</el-button>
    </router-link>
    <div class="center">
      <el-table
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            prop="templatename"
            label="模板名称">
        </el-table-column>
        <el-table-column
            prop="titlestyle"
            label="模板配置">
        </el-table-column>
        <el-table-column
            prop="found_time"
            label="创建时间">
        </el-table-column>
        <el-table-column
            label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          class="pages"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="123">
      </el-pagination>
    </div>
  </div>
</template>

<script>

  export default {
    name: "configure",
    data() {
      return {
        tableData:[]
        // tableData: [{
        //   id:'123',
        //   TemplateName: 'XXX可行性研究报告',
        //   TemplateConfig: '微软雅黑;4号;',
        //   FoundTime: '2020-07-22 15:15'
        // },{
        //   id:'1234',
        //   TemplateName: 'XXX可行性研究报告',
        //   TemplateConfig: '微软雅黑;4号;',
        //   FoundTime: '2020-07-22 15:15'
        // },{
        //   id:'12345',
        //   TemplateName: 'XXX可行性研究报告',
        //   TemplateConfig: '微软雅黑;4号;',
        //   FoundTime: '2020-07-22 15:15'
        // },{
        //   id:'123456',
        //   TemplateName: 'XXX可行性研究报告',
        //   TemplateConfig: '微软雅黑;4号;',
        //   FoundTime: '2020-07-22 15:15'
        // }]
      }
    },
    methods:{
      handleEdit(index,row){
        console.log(row.id);
        this.$router.push({path:'NewTemplate',query: {id: row.id}})
      }
    },
    mounted () {
      // this.init()
      this.axios
              .get('http://127.0.0.1:8000/template/')
              .then(response =>
              {var Data = response.data
                alert(Data.data)
                this.tableData=Data.data
              }
              )
              .catch(function (error) { // 请求失败处理
                console.log(error);
              });
    }
  }

</script>

<style scoped>
  .configure{
    text-align: left;
    box-sizing: border-box;
    padding: 20px;
  }
  .headerp{
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    text-align: left;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid #cfcfcf;
    margin-bottom: 20px;
  }
  .center{
    margin-top: 20px;
  }
  .pages{
    margin-top: 20px;
  }

</style>